<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 100px;
        text-align: left;
    }

    .layui-mini {
        display: inline-block;
        width: 100px;
        height: 32px;
        border-radius: 4px;
    }

</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>
    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">
        <div class="title-row layuimini-title title-sticky">
            <div class="title-left">
                <div class="layui-tabs layui-tabs-card noborder" id="planTabs">
                    <ul class="layui-tabs-header">
                        <li lay-closable="false">常规排班考勤指标配置</li>
                        <li lay-closable="false">特殊岗位定制方案</li>
                    </ul>
                </div>
            </div>
            <div class="title-right">

            </div>
        </div>
        <form id="pane-0" class="pane-form layui-form" action="">
            <div class="section">
                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">排班考勤指标配置</span>
                        </div>
                    </div>
                </div>
                <div class="layui-font-16 mb-5">
                    <div class="flex-middle">
                        <div class="pr-4">上班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            上班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~上班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打上班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许迟到范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">下班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            下班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~下班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打下班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许早退范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                        <div class="solid radius p-4 layui-font-gray">
                            在
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟内无轨迹按离线处理
                        </div>
                    </div>
                </div>

                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">蓝牙配置信息</span>
                        </div>
                    </div>

                </div>
                <div class="layui-font-16 mb-5">
                    <div class="flex-middle">
                        <div class="pr-4">上班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            上班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~上班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打上班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许迟到范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">下班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            下班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~下班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打下班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许早退范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                        <div class="solid radius p-4 layui-font-gray">
                            在
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟内无轨迹按离线处理
                        </div>
                    </div>
                </div>
                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">GPS+蓝牙混合配置</span>
                        </div>
                    </div>
                </div>
                <div class="layui-font-16 mb-5">
                    <div class="flex-middle">
                        <div class="pr-4">上班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            上班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~上班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打上班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许迟到范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">下班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            下班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~下班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打下班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许早退范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                        <div class="solid radius p-4 layui-font-gray">
                            在
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟内无轨迹按离线处理
                        </div>
                    </div>
                </div>
                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">助英台+考勤机混合配置</span>
                        </div>
                    </div>
                </div>

                <div class="layui-font-16 mb-5">
                    <div class="flex-middle">
                        <div class="pr-4">上班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            上班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~上班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打上班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许迟到范围
                        </div>
                    </div>
                    <div class="flex-middle mt-4">
                        <div class="pr-4">下班：</div>
                        <div class="solid radius p-4 layui-font-gray">
                            下班前
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟~下班后
                            <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，可打下班卡 ，
                            <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                class="layui-input layui-mini">
                            分钟时段内，允许早退范围
                        </div>
                    </div>
                </div>

                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">地图显示人员点位规则</span>
                        </div>
                    </div>
                    <div class="title-right">
                        <span class="title-right-text"></span>
                    </div>
                </div>


                <div class="layui-font-16 mb-5">
                    <div class="flex-middle">
                        <div class="solid radius p-4 layui-font-gray pr-8">
                            地图显示人员定位规则
                            <div class="inline-block ml-8">
                                <select name="interest" lay-filter="aihao">
                                    <option value=""></option>
                                    <option value="0" selected>人员点位全部显示</option>
                                    <option value="1">人员点位仅在排班时间内显示</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title-row">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">地图显示人员定位规则</span>
                        </div>
                    </div>
                </div>
                <div class="layui-font-16 mb-5">
                    <span>是否考虑离岗</span>
                    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="开|关" />
                    <span class="ml-9">是否考虑一人多机</span>
                    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="开|关" />
                    <span class="ml-9">是否考虑坐岗</span>
                    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="开|关" />
                </div>
            </div>
            <div class="t-r p-4">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
            </div>
        </form>

        <form id="pane-1" class="pane-form layui-form layui-hide" action="">
            <div class="section">
                <div class="layuimini-alert">
                    说明：特殊岗位定制考勤指标方案后，则这类岗位的人员将执行新的方案规则，适用于上下班时间范围需灵活的岗位人员，比如司机等。
                </div>

                <div class="layui-font-16 mb-5 p-4">
                    <div> 排班考勤指标配置</div>
                    <div class="flex-middle mt-4">
                        <div class="ayui-font-black">
                            经过
                            <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                class="layui-input layui-mini">
                            小时漏签到转化
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label font-weight">是否开启方案</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest"
                                title="已开启|未开启" />
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label font-weight">岗位选择</label>
                        <div class="layui-input-inline layui-input-wrap">

                            <button class="layui-btn layui-btn-normal layui-btn-sm">
                                <i class="layui-icon layui-icon-addition"></i>添加
                            </button>

                        </div>
                    </div>

                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">GPS配置信息</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-font-16 mb-5">
                        <div class="flex-middle">
                            <div class="pr-4">上班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                上班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~上班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打上班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许迟到范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">下班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                下班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~下班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打下班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许早退范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                            <div class="solid radius p-4 layui-font-gray">
                                在
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟内无轨迹按离线处理
                            </div>
                        </div>
                    </div>

                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">蓝牙配置信息</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-font-16 mb-5">
                        <div class="flex-middle">
                            <div class="pr-4">上班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                上班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~上班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打上班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许迟到范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">下班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                下班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~下班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打下班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许早退范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                            <div class="solid radius p-4 layui-font-gray">
                                在
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟内无轨迹按离线处理
                            </div>
                        </div>
                    </div>
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">GPS+蓝牙混合配置</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-font-16 mb-5">
                        <div class="flex-middle">
                            <div class="pr-4">上班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                上班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~上班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打上班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许迟到范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">下班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                下班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~下班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打下班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许早退范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">&emsp;&emsp;&emsp;&nbsp;&nbsp;</div>
                            <div class="solid radius p-4 layui-font-gray">
                                在
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟内无轨迹按离线处理
                            </div>
                        </div>
                    </div>
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">助英台配置信息</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-font-16 mb-5">
                        <div class="flex-middle">
                            <div class="pr-4">上班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                上班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~上班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打上班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许迟到范围
                            </div>
                        </div>
                        <div class="flex-middle mt-4">
                            <div class="pr-4">下班：</div>
                            <div class="solid radius p-4 layui-font-gray">
                                下班前
                                <input type="text" placeholder="请输入" name="start" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟~下班后
                                <input type="text" placeholder="请输入" name="end" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，可打下班卡 ，
                                <input type="text" placeholder="请输入" name="minix" autocomplete="off"
                                    class="layui-input layui-mini">
                                分钟时段内，允许早退范围
                            </div>
                        </div>
                    </div>

                </div>
                <div class="t-r p-4">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn1">保存</button>
                </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/
        form.render();
        /******************** 事件 end ********************/


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

            });


            return false;
        });
        //监听提交
        form.on('submit(saveBtn1)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

            });


            return false;
        });



        /******************** 渲染组件 start ********************/

        // 指定开关事件
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
        });


        form.render('select'); //刷新select选择框渲染
        // 起始日期
        laydate.render({
            elem: '#date_period_start',
            range: true
        });
        // 截止日期
        laydate.render({
            elem: '#date_period_end',
            range: true
        });
        // 初始化选项卡
        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });

        // planTabs 切换事件
        tabs.on('afterChange(planTabs)', function (data) {
            var tabIndex = data.index;
            // 隐藏所有 pane-form
            $('.pane-form').addClass('layui-hide');

            // 显示当前 tab 对应的 pane-form
            $('#pane-' + tabIndex).removeClass('layui-hide');
        });




        /******************** 渲染组件 end ********************/


        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>